</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_RATING%%" --><!--DXMETADATA end --> <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end--> <div id="ProjectTitle"><!--DXMETADATA start type="ProjectTitle" -->WPF and Silverlight Edition Basic Library <!--DXMETADATA end--></div> <div id="PageTitle"><div id="PageTitleText"><!--DXMETADATA start type="ItemTitle" -->Creating Menus<!--DXMETADATA end--></div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label> <label id="ExpandAllLabel" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label> </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end --> </div> <!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="BreadcrumbsContainer"><table><tr><td> <a href="WPF and Silverlight Edition Basic Library.html">WPF and Silverlight Edition Basic Library</a> > <a href="Menu and ContextMenu.html">Menu and ContextMenu</a> > <a href="Menu and ContextMenu Elements.html">Menu and ContextMenu Elements</a> > Creating Menus</td></tr></table></div><!--DXMETADATA end --> <div id="BodyContent"> <!--DXMETADATA start type="TopicSection" name="BodyText"--><div class="TabContainer TabContainerWidget"> <ul> <li class="FilteredContent8c2a94bd-45a1-4699-b2fb-d27456f47f1a"><a href="#TabContent-8c2a94bd-45a1-4699-b2fb-d27456f47f1a">Creating a Top-Level Menu</a></li> <li class="FilteredContent13044e87-4167-4ee7-985a-44febb5d55f7"><a href="#TabContent-13044e87-4167-4ee7-985a-44febb5d55f7">Creating a Submenu</a></li> <li class="FilteredContent8bcb10af-81a1-49c9-93f0-067744dadd73"><a href="#TabContent-8bcb10af-81a1-49c9-93f0-067744dadd73">Creating a Context Menu</a></li> </ul> <div id="TabContent-8c2a94bd-45a1-4699-b2fb-d27456f47f1a" class="FilteredContent8c2a94bd-45a1-4699-b2fb-d27456f47f1a"> <div data-title="Creating a Top-Level Menu"> <p>Complete the following steps:</p> <ol> <li>Add a <strong>C1Menu</strong> or <strong>C1ContextMenu</strong> to your application.</li> <li>Place the following XAML between the <strong><c1:C1Menu></strong> and <strong></c1:C1Menu></strong> tags or the <strong><c1:C1ContextMenu></strong> and <strong></c1:C1ContextMenu></strong> tags.</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1MenuItem Header=<span style="COLOR: #800000">"MenuItem1"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>/> <c1:C1MenuItem Header=<span style="COLOR: #800000">"MenuItem2"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>/> <c1:C1MenuItem Header=<span style="COLOR: #800000">"MenuItem3"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>/> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <ol style="COUNTER-RESET: item 2" start="3"> <li>Add <strong>Height="Auto"</strong> and <strong>Width="Auto"</strong> to the <strong><c1:C1Menu></strong> or <strong><c1:C1ContextMenu></strong> tag.</li> <li>Run the program and complete one of the following:</li> </ol> <ul> <li>If you are using a C1Menu control, observe that a menu bar with three items appears.</li> </ul> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <p style="MARGIN-RIGHT: 0px" dir="ltr">OR</p> </blockquote> <ul> <li>If you are using a C1ContextMenu control, right-click the element the context menu is attached to. Observe that a menu with three items appears.</li> </ul> </div> </div> <div id="TabContent-13044e87-4167-4ee7-985a-44febb5d55f7" class="FilteredContent13044e87-4167-4ee7-985a-44febb5d55f7"> <div data-title="Creating a Submenu"> <p>In this topic, you will create a submenu that's attached to one of a menu's items. This topic assumes that you have created a top-level menu (see <strong>Creating a Top-Level Menu</strong>) with at least one menu item.</p> <p>Complete the following steps:</p> <ol> <li>Place the following XAML between the <c1:C1Menu> and </c1:C1Menu> tags or the <c1:C1ContextMenu>and </c1:C1ContextMenu> tags.</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1MenuItem Header=<span style="COLOR: #800000">"Click here"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>> <c1:C1MenuItem Header=<span style="COLOR: #800000">"Submenu Item"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>/> <c1:C1MenuItem Header=<span style="COLOR: #800000">"Submenu Item"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>/> <c1:C1MenuItem Header=<span style="COLOR: #800000">"Submenu Item"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span>/> </c1:C1MenuItem> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <ol style="COUNTER-RESET: item 1" start="2"> <li>Add Height="Auto" and Width="Auto" to the <c1:C1Menu> or <c1:C1ContextMenu> tag.</li> </ol> <ol style="COUNTER-RESET: item 2" start="3"> <li>Run the program and complete one of the following:</li> </ol> <ul> <li>If you are using a C1Menu control, click Click here. Observe that a submenu with three items appears.</li> </ul> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <p>OR</p> </blockquote> <ul> <li>If you are using a C1ContextMenu control, right-click the element you attached it to in order to open the context menu. Click Click Here and observe that a submenu with three items appears.</li> </ul> </div> </div> <div id="TabContent-8bcb10af-81a1-49c9-93f0-067744dadd73" class="FilteredContent8bcb10af-81a1-49c9-93f0-067744dadd73"> <div data-title="Creating a Context Menu"> <p>In this topic, you will use the C1ContextMenuService class to attach a context menu to a TextBox control.</p> <p>Complete the following steps:</p> <ol> <li>Add a reference to the C1.Silverlight assembly to your Silverlight project.</li> <li>Open Source view (XAML view if you're using Blend).</li> <li>Add the following markup to the <UserControl> tag to import the namespace of the assembly:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> xmlns:c1=<span style="COLOR: #800000">"clr-namespace:C1.Silverlight;assembly=C1.Silverlight"</span> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <ol style="COUNTER-RESET: item 3" start="4"> <li>Replace the <Grid> tag with the following markup to add a TextBox control to the project: </li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <Grid x:Name=<span style="COLOR: #800000">"LayoutRoot"</span> Background=<span style="COLOR: #800000">"White"</span>> <TextBox Text=<span style="COLOR: #800000">"Right-click for context menu"</span> Width=<span style="COLOR: #800000">"170"</span> Height=<span style="COLOR: #800000">"25"</span> Background=<span style="COLOR: #800000">"#FFC4D8D4"</span>> </TextBox> </Grid> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <ol style="COUNTER-RESET: item 4" start="5"> <li>Add <strong>C1ContextMenuService</strong> to the TextBox by placing the following markup between the <strong><TextBox></strong> and <strong></TextBox></strong> tags:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1ContextMenuService.ContextMenu> </c1:C1ContextMenuService.ContextMenu> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <p>The <strong>C1ContextMenuService</strong> class exposes context menus as extender properties that can be attached to any <strong>FrameworkElement</strong> objects on the page. </p> </blockquote> <ol style="COUNTER-RESET: item 5" start="6"> <li>Place the following XAML between the <strong><c1:C1ContextMenuService.ContextMenu></strong> and <strong></c1:C1ContextMenuService.ContextMenu></strong> tags to create a context menu and a few context menu items:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1ContextMenu Width=<span style="COLOR: #800000">"Auto"</span> Height=<span style="COLOR: #800000">"Auto"</span>> <c1:C1MenuItem Header=<span style="COLOR: #800000">"MenuItem1"</span>></c1:C1MenuItem> <c1:C1MenuItem Header=<span style="COLOR: #800000">"MenuItem2"</span>></c1:C1MenuItem> <c1:C1MenuItem Header=<span style="COLOR: #800000">"MenuItem3"</span>></c1:C1MenuItem> </c1:C1ContextMenu> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <ol style="COUNTER-RESET: item 6" start="7"> <li>Run the project and right-click the TextBox control. Observe that a context menu with three items appears. </li> </ol> </div> </div> </div><!--DXMETADATA end--> <a name="seealsobookmark"></a> <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end--> </div> <div id="FooterContent"> <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p> </p><p> </p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p> </p><p> </p><hr style="height: 1px"><p>Copyright © <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved.</p><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a href="http://feedback.componentone.com/forums/272000-wpf-and-silverlight-documentation" target="_blank">Documentation Feedback</a> <!--DXMETADATA end--> </div> </body> </html>